<!--
      ├─css //css目录
      │  │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）
      │  │  ├─laydate
      │  │  ├─layer
      │  │  └─layim
      │  └─layui.css //核心样式文件
      ├─font  //字体图标目录
      ├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）
      │─lay //模块核心目录
      │  └─modules //各模块组件
      │─layui.js //基础核心库
      └─layui.all.js //包含layui.js和所有模块的合并文件
-->
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>开始使用layui</title>
  <link rel="stylesheet" href="../lib/layui/css/layui.css">
</head>

<body>
  <script src="../lib/layui/layui.js"></script>
  <script>
    //注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function () {
      var element = layui.element;

      //…
    });
  </script>

  <div class="layui-card">
    <div class="layui-card-header">卡片面板</div>
    <div class="layui-card-body">
      卡片式面板面板通常用于非白色背景色的主体内<br>
      从而映衬出边框投影
    </div>
  </div>

  <div class="layui-collapse">
    <div class="layui-colla-item">
      <h2 class="layui-colla-title">杜甫</h2>
      <div class="layui-colla-content layui-show">内容区域</div>
    </div>
    <div class="layui-colla-item">
      <h2 class="layui-colla-title">李清照</h2>
      <div class="layui-colla-content layui-show">内容区域</div>
    </div>
    <div class="layui-colla-item">
      <h2 class="layui-colla-title">鲁迅</h2>
      <div class="layui-colla-content layui-show">内容区域</div>
    </div>
  </div>



</body>

</html>